//订单管理 - 待放款订单   催收管理 - 逾期订单、催收订单的  form查询

import React, { Component } from 'react';
import { Form , InputNumber, Input, DatePicker, Select, Row, Col } from 'antd';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

class PendingLoanQuery extends Component {

	handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
			<div>   
				<div className="line"></div>
				<div className="per-info">
					<Form layout="inline" onSubmit={this.handleSubmit}>
						<Row>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('phone', {
                    rules: [{ required: true, message: 'Please input your phone!' }],
                  })(
                    <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}								
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('name', {
                    rules: [{ required: true, message: 'Please input your name!' }],
                  })(
                    <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}		
								</FormItem>
							</Col>
              <Col span={3}>
								<FormItem>
									{getFieldDecorator('loanStatus', {
                    rules: [{ required: true, message: 'Please input your loanStatus!' }],
                  })(
                    <Select placeholder="借款状态" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
											<Select.Option value="waitMachine">待放款</Select.Option>
											<Select.Option value="machineQuerying">放款中</Select.Option>
											<Select.Option value="waitPeople">放款失败</Select.Option>
											<Select.Option value="peopleQuerying">待还款</Select.Option>
											<Select.Option value="queried">已还款</Select.Option>
										</Select>
                  )}               
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('minLoan', {
                    rules: [{ required: true, message: 'Please input your minLoan!' }],
                  })(
                    <InputNumber placeholder="最小借款次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}								
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('maxLoan', {
                    rules: [{ required: true, message: 'Please input your maxLoan!' }],
                  })(
                    <InputNumber placeholder="最大借款次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('minPostpone', {
                    rules: [{ required: true, message: 'Please input your minPostpone!' }],
                  })(
                    <InputNumber placeholder="最小展期次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={2}>
								<FormItem>
									{getFieldDecorator('maxPostpone', {
                    rules: [{ required: true, message: 'Please input your maxPostpone!' }],
                  })(
                    <InputNumber placeholder="最大展期次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '125px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem>
									{getFieldDecorator('range-picker', rangeConfig)(
										<RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
									)}
								</FormItem>
							</Col>
						</Row>
						<Row>
							<Col span={4}>
								<FormItem>
								{getFieldDecorator('sq-picker', rangeConfig)(
									<RangePicker style={{ color: 'rgba(0,0,0,.25)', width: '260px' }} />
								)}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem>
								{getFieldDecorator('sq-picker', rangeConfig)(
									<RangePicker style={{ color: 'rgba(0,0,0,.25)', width: '260px' }} />
								)}
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('minDays', {
                    rules: [{ required: true, message: 'Please input your minDays!' }],
                  })(
                    <InputNumber placeholder="最小逾期天数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '195px' }} />
                  )}	
								</FormItem>
							</Col>
							<Col span={2}>
								<FormItem>
									{getFieldDecorator('maxDays', {
                    rules: [{ required: true, message: 'Please input your maxDays!' }],
                  })(
                    <InputNumber placeholder="最大逾期天数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '125px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('auditor', {
                    rules: [{ required: true, message: 'Please input your auditor!' }],
                  })(
                    <Select placeholder="审核专员" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
											<Select.Option value="lq">李强</Select.Option>
											<Select.Option value="wm">王梅</Select.Option>
										</Select>
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('MOcommissioner', {
                    rules: [{ required: true, message: 'Please input your MOcommissioner!' }],
                  })(
                    <Select placeholder="MO专员" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
											<Select.Option value="yh">尹浩</Select.Option>
											<Select.Option value="xj">徐静</Select.Option>
										</Select>
                  )}									
								</FormItem>
							</Col>
							<Col span={2}>
								<FormItem>
									{getFieldDecorator('collectionStatus', {
                    rules: [{ required: true, message: 'Please input your collectionStatus!' }],
                  })(
                    <Select placeholder="催收状态" style={{ color: 'rgba(0,0,0,.25)', width: '125px' }}>
											<Select.Option value="collection">交催收</Select.Option>
											<Select.Option value="inCollection">催收中</Select.Option>
											<Select.Option value="collected">催收完成</Select.Option>
										</Select>
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('collectter', {
                    rules: [{ required: true, message: 'Please input your collectter!' }],
                  })(
                    <Select placeholder="催收人" style={{ color: 'rgba(0,0,0,.25)', width: '203px' }}>
											<Select.Option value="yh">尹浩</Select.Option>
											<Select.Option value="xj">徐静</Select.Option>
										</Select>
                  )}							
								</FormItem>
							</Col>
						</Row>
					</Form>
				</div>     
			</div>
		);
	}
}
    
const loanForm = Form.create()(PendingLoanQuery);
    
export default loanForm;